<script setup>
import { storeToRefs } from 'pinia';
import { toRefs } from 'vue';
import { useRoute } from 'vue-router';
import { useCounterStore } from '../store';

const route = useRoute()

const counter = useCounterStore()

// toRefs 是 vue 提供，可以把所有的属性和方法都转响应式
// storeToRefs 是 pinia 提供，只转换 属性，不转方法
const { count, double, add, addNum, addNumAsync } = toRefs(counter)
// const { count, double, add, addNum, addNumAsync } = storeToRefs(counter)
</script>

<template>
    <div>主页</div>
    <div>{{counter}}</div>
    <div>计数器:{{count}}</div>
    <div>双倍： {{double}}</div>

    <button @click="add">点我加1</button>
    <button @click="addNum(10)">点我加10</button>
    <button @click="addNumAsync(10)">点我异步加10</button>
</template>

<style>

</style>
